---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

// Global
@import "colors";
@import "layout";
@import "typography";

// Components
@import "byline";
@import "code";
@import "featured";
@import "figures";
@import "nav";
@import "tags";
@import "twitter-cards";

:root {
    color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body,
html {
  background-color: var(--bg-color);
  color: var(--fg-color);
  fill: var(--fg-color);
  margin: 0;
  overflow-x: hidden;
}

html {
  // To blend with the footer on short pages
  background-color: var(--secondary-bg-color);
}

svg {
  fill: inherit;
}

.error {
  max-width: 22rem;
  margin: 8em auto;
  text-align: center;

  p {
    font-family: var(--ui-font);
  }
}

nav.pagination {
  font-size: 0; // Fix percentage issues with whitespace
  margin: 2rem auto;
  text-align: center;

  a {
    display: inline-block;
    font-size: 1rem;
    font-family: var(--ui-font);
    padding: 1em;

    &.next::after {
      content: " →";
    }

    &.previous::before {
      content: "← ";
    }
  }
}

.social {
  font-size: 0; // Fix percentage issue with whitespace
  margin: 4rem auto;
  text-align: center;

  h2 {
    font-size: 1.5rem;
  }

  div {
    display: inline-block;
    font-size: 1rem;
    width: 50%;
  }

  a {
    display: inline-block;
    margin: 0.75rem;

    img {
      width: 32px;
      height: 32px;
    }
  }
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.button {
  border: 1px solid var(--accent-color);
  border-radius: 0.25em;
  font-family: var(--ui-font);
  margin: 0.5em;
  padding: 0.5em 1em;
  text-decoration: none;

  &.suggested {
    background-color: var(--accent-color);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.05),
      0 3px 3px rgba(0, 0, 0, 0.22);
    color: var(--bg-color);
  }

  &.flat {
    border: none;
  }
}

pre {
  -webkit-text-size-adjust: none;
}

.hidden {
  display: none;
}
